<template>
    <div>
        <input type="text" v-model="title" @keydown.enter="addTodo">
        <ul>
            <li v-for="(todo,index) in todos" :key="index">{{todo}}</li>
        </ul>

        <transition name="modal">
            <div class="info-wrapper" v-if="showModal">
            <div class="info">
                亲，你什么都没输！
            </div>
        </div>
        </transition>
    </div>
</template>

<script setup>
import { reactive, ref } from "@vue/reactivity"
const title = ref('')
const todos = reactive(['吃饭', '睡觉'])

function addTodo() {
    if(!title.value) {
        showModal.value = true
        setTimeout(() => {
            showModal.value = false
        }, 1500)
    } else todos.push(title.value)
}

const showModal = ref(false)

</script>

<style>
.info-wrapper{
    position: fixed;
    top: 0;
    width: 200px;
}
.info{
    padding: 20px;
    color: #fff;
    background: blueviolet;
}
.modal-enter-from,.modal-leave-to {
    opacity: 0;
    transform: translateX(-200px);
}
.modal-enter-active,.modal-leave-active {
    transition: all 0.3s ease;
}
</style>